package examples
{
	import com.dreamana.command.*;
	import com.dreamana.components.*;
	import com.dreamana.ui.*;
	
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
	
	public class SkinningExample extends Sprite
	{
		public function SkinningExample()
		{
			stage? init() : this.addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(event:Event=null):void
		{
			if(event) this.removeEventListener(event.type, init);
			
			this.x = 0;
			this.y = 240;
			
			/* Skinning example */
			
			//Skinnable Components
			var canvas:Canvas = new Canvas(300, 160);
			canvas.setPosition(10, 10);
			this.addChild(canvas);
			
			var panel:Panel = new Panel(300, 160);
			panel.setPosition(10, 10);
			this.addChild(panel);
			
			var button:Button = new Button(128, 34, new Label(128, 20, null, "OK", 0, 7));
			button.setPosition(86, 114);
			panel.addChild(button);
			
			//Non-Skinnable Components
			var label:Label = new Label(280, 100, null, "", 10, 10);
			label.multiline = true;
			label.htmlText = "<b>Skinning Feature</b><br><br>support scale9Grid textures(like DisplayObject)<br>custom Loading order (think about LazyLoad)<br><br>Click 'OK' to try dynamic skinning";
			panel.addChild(label);
			
			//Skinning from some images.
			var skinning:SerialCommand = new SerialCommand(
				new SkinLoadCommand("../assets/bg.jpg"),
				new SkinLoadCommand("../assets/frame.png")
			);
			canvas.setStyleAsync("background-image", new SkinClip(null, skinning.commands[0].loader));
			canvas.setStyle("background-repeat", true);
			panel.setStyleAsync("background-image", new SkinClip(null, skinning.commands[1].loader));
			panel.setStyle("background-9grid", new Rectangle(16, 16, 96, 96));
			button.setStyleAsync("background-image", new SkinClip(null, skinning.commands[1].loader));
			button.setStyle("background-9grid", new Rectangle(16, 16, 96, 96));
			
			//Click to start
			button.addEventListener(MouseEvent.CLICK, function(e:Event):void 
			{
				skinning.execute();
			});
		}
	}
}